<template>
  <q-markup-table separator="horizontal" flat bordered>
    <tbody>
    <tr>
      <td>结果值:</td>
      <td colspan="5">{{result}}</td>
    </tr>
    <tr>
      <td style="width: 50px;">
        <q-radio v-model="model" val="type1"></q-radio>
      </td>
      <td colspan="5">周，允许的通配符[, - * /]</td>
    </tr>
    <tr>
      <td style="width: 50px;">
        <q-radio v-model="model" val="type6"></q-radio>
      </td>
      <td colspan="5">不指定</td>
    </tr>
    <tr>
      <td>
        <q-radio v-model="model" val="type2"></q-radio>
      </td>
      <td>周期从</td>
      <td>
        <q-select dense emit-value v-model="cycle01" :options="cycleOptions01" map-options
                  label="开始">
        </q-select>
      </td>
      <td>至</td>
      <td>
        <q-select dense emit-value v-model="cycle02" :options="cycleOptions02"  map-options
                  label="结束">
        </q-select>
      </td>
      <td>周</td>
    </tr>
    <tr>
      <td>
        <q-radio v-model="model" val="type3"></q-radio>
      </td>
      <td>从第</td>
      <td>
        <q-select map-options dense emit-value v-model="start" :options="startOptions"
                  label="指定第几周"></q-select>
      </td>
      <td>
        周的
      </td>
      <td>
        <q-select map-options dense emit-value v-model="targetWeek" :options="multiOptions"
                  label="指定周几"></q-select>
      </td>
      <td>
        周执行一次
      </td>
    </tr>
    <tr>
      <td>
        <q-radio v-model="model" val="type5"></q-radio>
      </td>
      <td>本月最后一个</td>
      <td colspan="2">
        <q-select map-options dense emit-value v-model="lastWeek" :options="multiOptions"
                  label="选择本月最后一周的星期几"></q-select>
      </td>
    </tr>
    <tr>
      <td>
        <q-radio v-model="model" val="type4"></q-radio>
      </td>
      <td>指定</td>
      <td colspan="4">
        <q-select :multiple="true" map-options dense emit-value v-model="multi" :options="multiOptions"
                  label="指定周数（可多选）" @change="changeMulti"></q-select>
      </td>
    </tr>
    </tbody>
  </q-markup-table>
</template>

<script setup>
import {computed, defineProps, onMounted, ref, toRefs, watch} from 'vue'
import {i18n} from "boot/i18n";
const props = defineProps({
  initData: {
    type: String,
    required: false,
  }
})
const {initData} = toRefs(props)
onMounted(()=>{
  doChange()
})
const doChange = ()=>{
  let newValue = initData.value
  if(newValue) {
    if (newValue === '*') {
      model.value = 'type1'
    } else if (newValue.indexOf('-') != -1) {
      model.value = 'type2'
      let values = newValue.split("-")
      cycle01.value = parseInt(values[0])
      cycle02.value = parseInt(values[1])
    } else if (newValue.indexOf('#') != -1) {
      model.value = 'type3'
      let values = newValue.split("#")
      start.value = parseInt(values[0])
      targetWeek.value = parseInt(values[1])
    } else if (newValue.indexOf(',') != -1) {
      model.value = 'type4'
      let values = newValue.split(",")
      let abc = new Array();
      for(let i=0;i<values.length;i++)
        abc.push(parseInt(values[i]))
      multi.value = abc
    }else if (newValue.indexOf('L') != -1) {
      model.value = 'type5'
      let values = newValue.split("L")
      lastWeek.value = parseInt(values[0])
    }else if (newValue=='?') {
      model.value = 'type6'
    }
  }
}
watch(() => initData.value ,() => {
  doChange()
})
const model = ref('type1')
const cycle01 = ref(2)
const cycle02 = ref(3)
const multi = ref(new Array())
const start = ref(1)
const intervals = ref(1)
const emit = defineEmits(['handleFinish'])
const finalResult = ref('*')
const cycleOptions01 = ref(new Array())
const cycleOptions02 = ref(new Array())
const targetWeek = ref(2)
const lastWeek = ref(2)
watch(() => finalResult.value ,() => {
  emit('handleFinish',finalResult.value)
})
watch(() => cycle01.value ,() => {
  initCycleOptions()
  computeExpress()
})
watch(() => cycle02.value ,() => {
  initCycleOptions()
  computeExpress()
})
watch(() => start.value ,() => {
  computeExpress()
})
watch(() => targetWeek.value ,() => {
  computeExpress()
})
watch(() => lastWeek.value ,() => {
  computeExpress()
})
const multiOptions = computed(() => {
  let result = []
  for (let i = 1; i < 8; i++) {
    result.push({label: i18n.global.t('Week'+i), value: i});
  }
  return result
})
const startOptions = computed(()=>{
  let result = []
  for (let i = 1; i < 5; i++) {
    result.push({label: i18n.global.t('WeekNum'+i), value: i});
  }
  return result
})
onMounted(()=>{
  initCycleOptions()
})
const initCycleOptions = ()=>{
  cycleOptions01.value = cycleOptionsInit01()
  cycleOptions02.value = cycleOptionsInit02()
}
const cycleOptionsInit01 =()=>{
  let result = []

  if(cycle02.value == 1){
    for (let i = 2; i < 8; i++) {
        result.push({label: i18n.global.t('Week'+i), value: i});
    }
    result.push({label: i18n.global.t('Week'+1), value: 1});
    return result
  }else{
    for (let i = 2; i <= cycle02.value; i++) {
      result.push({label: i18n.global.t('Week'+i), value: i});
    }
    return result
  }
}

const cycleOptionsInit02 = ()=>{
  let result = []
  if(cycle01.value != 1){
    for(let i=cycle01.value;i<8;i++){
        result.push({label: i18n.global.t('Week'+i), value: i});
    }
    result.push({label: i18n.global.t('Week'+1), value: 1});
    return result
  }else{
    result.push({label: i18n.global.t('Week'+1), value: 1});
    return result
  }
}

const result = computed(()=>{
  return computeExpress()
})
const computeExpress = ()=>{
  if(model.value === 'type1'){
    finalResult.value =  "*"
    return finalResult.value
  }else if(model.value === 'type2'){
    finalResult.value = cycle01.value + "-" + cycle02.value
    return finalResult.value
  }else if(model.value === 'type3'){
    finalResult.value = targetWeek.value + "#" + start.value
    return finalResult.value
  }else if(model.value === 'type4'){
    finalResult.value = multi.value.join(",")
    return finalResult.value
  }else if(model.value === 'type5'){
    finalResult.value = lastWeek.value+'L'
    return finalResult.value
  }else if(model.value === 'type6'){
    finalResult.value = '?'
    return finalResult.value
  }
}

const changeMulti = () =>{
  computeExpress()
}

const changeStart = (val) =>{
  initCycleOptions()
  computeExpress()
}

const changeEnd = (val) =>{
  initCycleOptions()
  computeExpress()
}
</script>

<style scoped>

</style>
